<template>
  <div class="register">
    <img class="background" src="../../assets/background.jpg" alt="background Image" />
    <div class="login_from">
      <img class="Logo" src="../../assets/Login_Logo.jpg" alt="logo Image" />
      <el-form
        :model="registerForm"
        :rules="rules"
        ref="registerForm"
        label-width="70px"
        label-position="top"
      >
        <el-form-item label="用户名:" prop="user">
          <el-input
            v-model="registerForm.user"
            placeholder="请输入用户名"
            maxlength="20"
            minlength="0"
            clearable
            autofocus
          ></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            v-model="registerForm.password"
            placeholder="请输入密码"
            type="password"
            maxlength="20"
            minlength="6"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码:" prop="checkPassword">
          <el-input
            v-model="registerForm.checkPassword"
            placeholder="请再次输入密码"
            type="password"
            maxlength="20"
            minlength="6"
            clearable
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="width: 40%; margin-left: 10%"
            round
            @click="register"
            :loading="registerLoging"
            >注册</el-button
          >
          <el-button
            type="primary"
            style="width: 40%; margin-left: 5%"
            round
            @click="login"
            :loading="loginLoading"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { RegisterInterface } from "../../api/login/index";
export default {
  mounted() {
    //绑定事件
    window.addEventListener("keydown", this.keyDown);
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码不少于 6 位"));
      } else if (value.length > 20) {
        callback(new Error("密码长度不大于 20 位"));
      } else {
        callback();
      }
    };
    const validateCheckPassword = (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        user: "",
        password: "",
        checkPassword: "",
      },
      rules: {
        user: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword,
          },
        ],
        checkPassword: [
          {
            required: true,
            trigger: "blur",
            validator: validateCheckPassword,
          },
        ],
      },
      loginLoading: false,
      registerLoging: false,
    };
  },
  methods: {
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        this.register();
      }
    },
    /**
     * 点击注册按钮时触发
     */
    register() {
      //  检查用户的输入是否符合设置的表单验证
      this.$refs.registerForm.validate(async (valid) => {
        if (valid) {
          //  a. 如果符合预先设置的表单验证，则判定为合法数据，允许进行注册操作

          //   console.log(this.registerForm.user);
          //   console.log(this.registerForm.password);
          //   console.log(this.registerForm.checkPassword);

          //    构建后台需要的数据结构
          const data = {
            name: this.registerForm.user,
            password: this.registerForm.password,
          };

          //  按钮处于加载状态
          this.registerLoging = true;

          //    1. 调用后台接口，进行注册操作
          await RegisterInterface(data).then(
            (res) => {
              console.log(res);
              /**
               * res 的值分析：
               *    res = 1: 添加成功
               *    res = 0: 添加失败
               *    res = -1: 用户已经存在
               */
              if (res === 1 || res === "1") {
                //    2. 提示注册成功
                this.$notify({
                  /* 指定消息的标题 */
                  title: "注册",
                  /* 指定消息的内容 */
                  message: "注册成功，正在跳转到登录界面",
                  /* 指定消息出现的位置 */
                  position: "top-right",
                  /* 指定消息的类型 */
                  type: "success",
                  /* 持续两秒钟 */
                  duration: 5 * 1000,
                });
                //    3. 跳转到登录界面
                window.setTimeout(() => {
                  this.$router.push({
                    name: "登录",
                  });
                }, 1000);
              } else if (res === -1 || res === "-1") {
                //    提示用户已经存在于数据库中，跳转到登录界面
                this.$notify({
                  /* 指定消息的标题 */
                  title: "注册",
                  /* 指定消息的内容 */
                  message: "用户已经存在，请勿重复注册！正在跳转到登录界面，请登录",
                  /* 指定消息出现的位置 */
                  position: "top-right",
                  /* 指定消息的类型 */
                  type: "warning",
                  /* 持续两秒钟 */
                  duration: 5 * 1000,
                });
                //    3. 跳转到登录界面
                window.setTimeout(() => {
                  this.$router.push({
                    name: "登录",
                  });
                }, 1000);
              } else {
                //    提示出错了
                this.$notify({
                  /* 指定消息的标题 */
                  title: "注册",
                  /* 指定消息的内容 */
                  message: "出错了，请稍候重试！",
                  /* 指定消息出现的位置 */
                  position: "top-right",
                  /* 指定消息的类型 */
                  type: "error",
                  /* 持续两秒钟 */
                  duration: 5 * 1000,
                });
              }
              //  按钮处于加载状态
              this.registerLoging = false;
            },
            (err) => {
              console.log(err);
            }
          );
        }
      });
      //    b. 如果不符合预先设置的表单验证，则判定用户输入的数据为不合法数据，进行提示，不允许进行注册操作
    },
    /**
     * 点击登录按钮时触发
     */
    login() {
      this.loginLoading = true;
      //  提示
      this.$notify({
        /* 指定消息的标题 */
        title: "注册",
        /* 指定消息的内容 */
        message: "正在跳转到登录页面，请稍候...",
        /* 指定消息出现的位置 */
        position: "top-right",
        /* 指定消息的类型 */
        type: "success",
        /* 持续两秒钟 */
        duration: 2 * 1000,
      });

      //  跳转到登录页面
      window.setTimeout(() => {
        this.$router.push({
          name: "登录",
        });

        //  取消按钮加载状态
        this.loginLoading = false;
      }, 1000);
    },
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>

<style></style>
